<template>
	<view>
        <view class="tabs">
			<view class="tabs_title">
				<view
				v-for="(item,index) in tabs"
				:key="item.id"
				:class="['title_item',item.isActive?'active':'']"
				@click="handleItemTap"
				:data-index="index">
				{{item.value}}
				</view> 
			</view>
			<view class="tabs_content">
				<slot></slot>
			</view>
		</view>

	</view>
</template>
 
<script>

	export default {
		props:{
			tabs:{
				type:Array,
				value:[]
        	}
		},
		methods: {
			handleItemTap(e){
				//获取点击索引
				const {index} = e.currentTarget.dataset;
				//触发父组件事件 自定义
				this.$emit("tabsItemChange",{index});
			}
    	}
	}
</script>

<style lang="scss">

	.tabs{
		.tabs_title{
				display: flex;
				.title_item{ 
					display: flex;
					justify-content: center;
					align-items: center;
					flex: 1;
					padding: 15rpx 0;
				}
				.active{
					color: var(--themeColor);
					border-bottom: 5rpx solid currentColor;
				}
			}
			
		.tabs_content{} 
	}
	
</style>